<template>
    <div class="main">
        <div class="info txa-c">
            <img class="head-img" :src="userInfo.imgurl" alt="">
            <p>
                {{userInfo.nickname}}
            </p>
            <p class="join-date">
                ID：{{userInfo.id}}<!--<br> 加入时间：{{date}}-->
            </p>
            <p class="withdrawal ovh">
                <span class="fl txt-hide" @click="go('syRecord')">
                    金币佣金:{{userInfo.goldcommission}}元
                </span>
                <span class="fr txt-hide" @click="go('syRecord')">
                    钻石佣金:{{userInfo.gemcommission}}元
                </span>
            </p>
        </div>
        <flexbox class="flex-box" align="stretch">
            <flexbox-item>
                <div class="txa-c" @click="go('member','gold',userInfo.golduser)">
                    <i class="icon iconfont icon-tuiguang"></i>
                    我的金币会员
                    <span class="dis-b s-tip">
                            {{userInfo.golduser}}个金币会员
                        </span>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="txa-c" @click="go('member','gem',userInfo.gemuser)">
                    <i class="icon iconfont icon-zuanshi"></i>
                    我的钻石会员
                    <span class="dis-b s-tip">
                            {{userInfo.gemuser}}个钻石会员
                        </span>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="txa-c" @click="go('erweima')">
                    <i class="icon iconfont icon-erweima"></i>
                    推广专属海报
                    <span class="dis-b s-tip">
                                我的二维码
                            </span>
                </div>
            </flexbox-item>
        </flexbox>
        <flexbox class="flex-box" align="stretch">
            <flexbox-item>
                <div class="txa-c" @click="go('record',1)">
                    <i class="icon iconfont icon-huiyuan"></i>
                    金币会员充值记录
                    <span class="dis-b s-tip">
                            <!--{{zuanshichongzhi}}笔记录-->
                        </span>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="txa-c" @click="go('record',0)">
                    <i class="icon iconfont icon-qian"></i>
                    钻石会员充值记录
                </div>
            </flexbox-item>

            <flexbox-item>
                <div class="txa-c" @click="go('scoreOut')">
                    <i class="icon iconfont icon-tixian"></i>
                    提现记录
                    <span class="dis-b s-tip">
                            <!--{{presentRecord}}笔提现-->
                        </span>
                </div>
            </flexbox-item>
        </flexbox>
        <flexbox class="flex-box" align="stretch">
            <flexbox-item>
                <div class="txa-c" @click="go('withdrawalMoney')">
                    <i class="icon iconfont icon-tixian1"></i>
                    我要提现
                    <span class="dis-b s-tip">
                                <!--可提现{{withdrawalMoney}}元-->
                            </span>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="txa-c" @click="nothing">
                    <i class="icon iconfont icon-huiyuantianjiakehu"></i>
                    代理代充
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="txa-c" @click="go('bindInfo')">
                    <i class="icon iconfont icon-wentidan"></i>
                    查询绑定
                    <span class="dis-b s-tip hidden">
                                a
                            </span>
                </div>
            </flexbox-item>
        </flexbox>
        <toast width="60%" v-model="toast" type="text" :time="800" is-show-mask position="default">暂未开放</toast>
    </div>
</template>

<script>
    import {Flexbox, FlexboxItem} from 'vux'
    import store from '@/vuex/store'

    export default {
        components: {
            Flexbox,
            FlexboxItem
        },
        data() {
            return {
                //src: '',
                userInfo: {},
                toast: false,
                /*id: 123456,
                nickname: '',
                date: '2018-1-1',   // 加入时间
                withdrawalMoney: 2333,  // 提现金额
                extension: 2,   // 推广员
                diamond: 99,    // 钻石
                member: 2,      // 会员
                commission: 123,    // 佣金
                presentRecord: 123,     // 提现记录*/

            }
        },
        store,
        methods: {
            getData() {
                this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
                this.userInfo.goldcommission = this.userInfo.goldcommission/10000;
                this.userInfo.gemcommission = this.userInfo.gemcommission/100;
                //console.log(this.userInfo);
            },
            go(url, param, count) {
                if (param) {
                    this.$router.push({
                        name: url,
                        query: {
                            type: param,
                            count: count,
                        }
                    })
                } else {
                    this.$router.push({
                        name: url
                    })
                }
            },
            nothing() {
                this.toast = true;
            }
        },
        mounted: function () {
            this.getData();
        }
    }
</script>

<style scoped>
    .head-img {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }

    .info {
        color: #fff;
        background: #00BFFF;
        padding: 20px 0;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .join-date {
        font-size: 12px;
    }

    .flex-box > div {
        background: #fff;
        margin-bottom: 2px;
        margin-left: 2px !important;
        padding: 10px;
    }

    .withdrawal {
        font-size: 12px;
        width: 80%;
        margin: 15px auto 0;
    }

    .withdrawal span {
        width: 40%;
        border: #fff 1px solid;
        padding: 3px;
    }

    .icon {
        display: block;
        text-align: center;
        font-size: 26px;
        line-height: 32px;
        margin: 0 0 5px;
        color: red;
    }

    .weui-grids {
        background-color: #fff;
    }

    .s-tip {
        font-size: 12px;
        color: #b8b8b8;
        margin-top: 2px;
    }

    .hidden {
        visibility: hidden;
    }
</style>
